<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			padding:0;
			margin:0;
		}

		div{
			position: absolute;
			top:0;
			bottom: 0;
			left: 0;
			right: 0;
			margin:auto;
			/*padding:50px;*/
			border: 2px solid black;
		}
	</style>
</head>
<body>
	<div>
		<div>
			<div>
				<div>
					<div>
						<div class="a"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<input type="button" value="click here" id = "btn">
	
</body>
</html>
<script>
	
    //获取所有div
    var divArr = document.getElementsByTagName("div");
    console.log(divArr);
    for (var i = 0; i < divArr.length; i++){
    	//修改宽度
       divArr[i].style.width = 500 - i * 50 + "px";
       divArr[i].style.height = 500 - i * 50 + "px";
    }

    //获取按钮
    var btn = document.getElementById("btn");


    //绑定事件
    // btn.onclick = btnClickAction;
    //定时器，200毫秒执行一次函数
    setInterval(btnClickAction,100);

    function btnClickAction(){
    	 for (var i = 0; i < divArr.length - 1; i++){
    	 	divArr[i].style.background = divArr[i+1].style.background;
    	 }
    	 //获取最后一个元素
    	 var aDiv = divArr[divArr.length-1];
    	 aDiv.style.background = randomColor();


    }
    //随机数函数
    function randomNum(m,n){
    	return Math.floor(Math.random() * (n - m + 1) + m);
    }
    //产生一个随机颜色的函数

    function randomColor(){
    	var r = randomNum(0,255);
    	var g = randomNum(0,255);
    	var b = randomNum(0,255);
    	return "rgb("+ r + "," + g + "," + b + ")";
    }



</script>